<template>
    <!-- 横向书屋 -->
    <div class="swiperlist" ref="listbox">
        <!-- <div @click="touchmoveHandle">1111</div> -->
        <div class="swiper-box" ref="swiper">
            <div class="swiper-item" v-for="(item,index) in data" :key="index" @click="goDetail(item.bookId)">
                <img :src="$store.state.imgbaseUrl+item.coverImg" alt="..">
                <div class="book-title">
                    {{item.title}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import './SwiperList.scss';
    export default {
        name: 'SwiperList',
        props: ['data'],
        data() {
            return {
                headerImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1429175118,2649084526&fm=11&gp=0.jpg',


                startX: 0,

                startLeft: 0,

                boxWidth: 0,
                windowWidth: 0,

                recommend: [{
                        "author": "辰东",
                        "bookId": 74585,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "SERIALIZE",
                        "coverImg": "/file/group1/book/23515770-5434-446c-9323-6924df55c018.jpg",
                        "desc": " 在破败中崛起，在寂灭中复苏。 沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角…… ",
                        "title": "圣墟",
                        "word": "715万字"
                    },
                    {
                        "author": "唐家三少",
                        "bookId": 35707,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "END",
                        "coverImg": "/file/group1/book/d61fdbfe-58b3-4c52-9129-27c7bc5f9c0c.jpg",
                        "desc": " 唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大6。这里没有魔法，没有斗气，没有武术，却有神奇的武魂。这里的每个人，在自己六岁的时候，都会在武魂殿中令武魂觉醒。武魂有动物，有植物，有器物，武魂可以辅助人们的日常生活。而其中一些特别出色的武魂却可以用来修炼并进行战斗，这个职业，是斗罗大6上最为强大也是最荣耀的职业——魂师!当唐门暗器来到斗罗大6，当唐三武魂觉醒，他能否在这片武魂的世界再铸唐门的辉煌？他能否成为这个世界的主宰：神? ",
                        "title": "斗罗大陆",
                        "word": "322万字"
                    },
                    {
                        "author": "辰东",
                        "bookId": 38658,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "SERIALIZE",
                        "coverImg": "/file/group1/book/da6283fc-18a3-40d0-a654-c28de1ab2b10.jpg",
                        "desc": " 在破败中崛起，在寂灭中复苏。沧海成尘，雷电枯竭，那一缕幽雾又一次临近大地，世间的枷锁被打开了，一个全新的世界就此揭开神秘的一角…… ",
                        "title": "圣墟（圣虚）",
                        "word": "744万字"
                    },
                    {
                        "author": "天蚕土豆",
                        "bookId": 34798,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "SERIALIZE",
                        "coverImg": "/file/group1/book/aaed46d4-1499-4628-94a4-af9189002293.jpg",
                        "desc": " 天地为炉，万物为铜，阴阳为炭，造化为工。气运之争，蟒雀吞龙。究竟是蟒雀为尊，还是圣龙崛起，凌驾众生？这是气掌乾坤的世界，磅礴宏伟，一气可搬山，可倒海，可翻天，可掌阴阳乾坤。世间源气分九品，三品称玄，六品成天，九品号圣。吾有一口玄黄气，可吞天地日月… ",
                        "title": "元尊",
                        "word": "601万字"
                    },
                    {
                        "author": "厌笔萧生",
                        "bookId": 32019,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "SERIALIZE",
                        "coverImg": "/file/group1/book/c574f9a8-a2ce-4f0e-964c-f5d18beef59f.jpg",
                        "desc": " 千万年前，李七夜栽下一株翠竹。八百万年前，李七夜养了一条鲤鱼。五百万年前，李七夜收养一个小女孩。今天，李七夜一觉醒来，翠竹修练成神灵，鲤鱼化作金龙，小女孩成为九界女帝。这是一个养成的故事，一个不死的人族小子养成了妖神、养成了仙兽、养成了女帝的故事。请关注作者的公众号“萧府军团”。 ",
                        "title": "帝霸",
                        "word": "1988万字"
                    },
                    {
                        "author": "爱潜水的乌贼",
                        "bookId": 44228,
                        "categoryName": "玄幻小说",
                        "chapterStatus": "SERIALIZE",
                        "coverImg": "/file/group1/book/b9205a00-7a96-46e4-9f1a-14858091a2d2.jpg",
                        "desc": " 蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我从诡秘中醒来，睁眼看见这个世界：　　枪械，大炮，巨舰，飞空艇，差分机；魔药，占卜，诅咒，倒吊人，封印物……光明依旧照耀，神秘从未远离，这是一段“愚者”的传说。 ",
                        "title": "诡秘之主",
                        "word": "552万字"
                    }
                ],
            }
        },
        created() {
            this.$nextTick(() => {
                this.init();
            })
        },
        methods: {
            init() {

                this.$refs.swiper.addEventListener('touchstart', this.touchstartHandle, false);
                this.$refs.swiper.addEventListener('touchmove', this.touchmoveHandle, false);
                this.$refs.swiper.addEventListener('touchend', this.touchendHandle, false);

                let el = window.getComputedStyle(this.$refs.listbox);
                this.windowWidth = -parseInt(el.width);
            },
            touchmoveHandle(e) {
                let difference = e.targetTouches[0].clientX - this.startX;

                let step = 6;



                // 拖动范围   [ -模块长度 ，0] 
                // console.log('move->', difference);
                // 判断touch方向
                if (difference >= 0) {

                    // console.log('move >0  ->', this.startLeft);
                    if (this.startLeft > 0) {
                        return;
                    }

                    this.startLeft += step;
                    this.$refs.swiper.style.left = `${this.startLeft}px`;
                    // console.log( this.startLeft);
                    // console.log("d>0",this.$refs.swiper.style.left);
                } else {

                    // console.log('move  <->', this.startLeft);


                    if (this.startLeft <= (this.boxWidth - this.windowWidth)) {
                        return;
                    }

                    this.startLeft -= step;
                    this.$refs.swiper.style.left = `${this.startLeft}px`;
                    // console.log(this.startLeft);

                    // console.log(this.$refs.swiper.style.left);
                }
                // 修改初始值
                this.startX = e.targetTouches[0].clientX;

            },
            touchstartHandle(e) {
                // console.log("start ->", e.targetTouches[0].clientX);
                this.startX = e.targetTouches[0].clientX;

                let startstyle = window.getComputedStyle(this.$refs.swiper);
                this.startLeft = parseInt(startstyle.left);

                // console.log("width-->>", startstyle.width);
                this.boxWidth = -parseInt(startstyle.width);
            },
            touchendHandle() {
                console.log("end ->");

            },

            // 跳转到商品详情页面
            //查看商品详情页面
            goDetail(bookid) {
                console.log('goggo');
                this.$router.push({
                    name: 'Detail',
                    params: {
                        bookid
                    }
                });
            },
        },
    }
</script>